<template>
  <div class="details-top">
    <div style="color: white" z-index="50">
      African Safari Animlas 奇妙的草原动物
    </div>
    <div class="details-m">
      <img
        src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00394-510.jpg"
        alt=""
      />
    </div>
  </div>
  <div class="details-bot">
    <ul>
      <li>
        <p>以下课</p>
        <p>African Safari Animlas 奇妙的草原动物</p>
        <p>上课时间10：30</p>
        <van-button round type="primary" style="margin: 0 auto"
          >去上课</van-button
        >
      </li>
      <li>
        <p>课前预习</p>
        <p>知识点</p>
        <p>看绘本</p>
      </li>
      <li>
        <p>课后作业</p>
        <p>选一选</p>
        <p>读单词</p>
      </li>
      <li>
        <p>课后报告</p>
        <p>分享课后报告</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.details-top {
  font-size: 14px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  background: url(https://img0.baidu.com/it/u=1609175473,2841367284&fm=26&fmt=auto&gp=0.jpg);
}
.details-m {
  width: 60px;
  margin: -60px 280px;
  z-index: 50;
}
.details-m img {
  width: 60px;
  height: 60px;
}
.details-bot {
  margin: 0 auto;
  font-size: 14px;
  height: 800px;
  overflow-y: scroll;
}
.details-bot li {
  width: 300px;
  text-align: center;
  line-height: 10px;
  margin-left: 39px;
  margin-bottom: 10px;
  border: darkgray 1px solid;
  border-radius: 25px;
}
</style>
